<template>
  <el-submenu :index="indexString">
    <template slot="title">
      <div @click="clickLink">
        <i :class="'el-icon-db-'+linkInfo.databaseType"></i>
        <span slot="title">{{linkInfo.name}}</span>
        <div class="operation-group">
          <i class="el-icon-setting" @click.stop="chooseSettingModalShow"></i>
          <i class="el-icon-edit" @click.stop="editLinkModalShow"></i>
          <i class="el-icon-delete" @click.stop="deleteLinkModalShow"></i>
        </div>
      </div>

    </template>

    <Database v-for="(database,index) in linkInfo.databases" :key="index"
              :parentIndex="indexString" :index="index" :database="database"/>

  </el-submenu>
</template>

<script>
  import Database from "./Database";
  import Pubsub from 'pubsub-js';
  import {mapState} from "vuex";

  export default {
    props: ["linkInfo", "index"],
    name: "Link",
    components: {Database}
    , data() {
      return {
        indexString: (this.index + 1) + "",
        subscribed: false
      }
    }, computed: {
      ...mapState(["linkIsOpen"])

    },
    methods: {
      chooseSettingModalShow() {
        this.$store.dispatch("setCurrentLinkInfo", this.linkInfo);
        this.$store.dispatch("chooseSettingModalShow", true);
      }, editLinkModalShow() {
        this.$store.dispatch("setCurrentLinkInfo", this.linkInfo);
        this.$store.dispatch("editLinkModalShow", true);
      }, deleteLinkModalShow() {
        this.$store.dispatch("setCurrentLinkInfo", this.linkInfo);
        this.$store.dispatch("deleteLinkModalShow", true);
      }, clickLink() {

        if (!this.subscribed) {
          Pubsub.subscribe("loadDatabases", (msg => {
            this.$message({
              message: '打开连接失败!',
              type: 'warning'
            });
          }));
        }
        this.$store.dispatch("setCurrentLinkInfo", this.linkInfo);
        this.$store.dispatch("cancelCheckAll");
        this.$store.dispatch("loadDatabases", this.linkInfo);
        this.$store.dispatch("loadMappings", "");
      }
    }
  }
</script>

<style scoped>
  .operation-group {
    display: inline-block;
    float: right;
    margin-right: 10px;
  }
</style>
